<template>
  <el-dialog title="选择餐品" :visible.sync="dialogVisible" @close="$emit('update:visible',false)" :modal-append-to-body="true" :append-to-body="true" :close-on-click-modal="false" :destroy-on-close="true">
    <div>
      <el-table :data="arryList"
                @select-all="selectAll"
                @select="selectFnBox"
                :stripe="tableStyle.tableStripe"
                :border="tableStyle.tableBorder"
                tooltip-effect="dark"
                height="400"
                ref="table">
        <el-table-column
            type="selection"
            width="50"
            align="center">
        </el-table-column>
        <el-table-column
            label="展示图"
            align="center">
          <template slot-scope="scope">
            <viewerModle type="1" :imgSrc="scope.row.pic?scope.row.pic:''"></viewerModle>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="菜品名称"
            align="center">
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="submitCheckFn" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'

export default {
  name: 'studentMultiple',
  props: ['visible', 'usersectionId', 'userclassId', 'dynamicTagsArray'],
  data () {
    return {
      dialogVisible: this.visible,
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      editForm: {
        p: ''
      },
      arryList: [],
      applyBookBox: {}, // 选中人员信息
      applyBookBoxInit: {} // 本页面对应对象
    }
  },
  watch: {
    visible () {
      this.dialogVisible = this.visible
      console.log('this.visible:', this.visible)
      if (this.visible) {
        console.log('第一页1', this.dynamicTagsArray)
        if (JSON.stringify(this.dynamicTagsArray) !== '{}') {
          console.log('第一页2')
          this.applyBookBox = this.dynamicTagsArray
        } else {
          console.log('第一页')
          this.page.pageindex = 1
          this.applyBookBox = {}
        }
        this.InitFn()
      }
    }
  },
  created () {
  },
  methods: {
    // 初始化
    InitFn () {
      let _this = this
      this.editForm.p = this.page.pageindex
      this.$fetch(this.api.food_list, this.editForm).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
          let applyBookBoxInit = {}
          for (let i = 0; i < response.list.data.length; i++) {
            applyBookBoxInit[response.list.data[i].id] = response.list.data[i]
          }
          this.applyBookBoxInit = applyBookBoxInit
          _this.$nextTick(function () {
            _this.checked() // 每次更新了数据，触发这个函数即可。
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 设置默认选中
    checked () {
      console.log('默认选项判断', this.applyBookBox)
      for (let i = 0; i < this.arryList.length; i++) {
        if (this.applyBookBox[this.arryList[i].id]) {
          console.log('数值', i)
          this.$refs.table.toggleRowSelection(this.arryList[i], true)
        }
      }
    },
    // 点击全选
    selectAll (val) {
      // 全选所有跟空值，即使页面已经选择2项
      let applyBookBox = this.applyBookBox
      if (val.length !== 0) {
        // this.handleSelection = val
        for (let i = 0; i < val.length; i++) {
          if (!applyBookBox[val[i].id]) {
            // 不存在图书
            applyBookBox[val[i].id] = val[i]
          }
        }
      } else {
        // 清除所有 arryList
        for (let i = 0; i < this.arryList.length; i++) {
          if (this.applyBookBox[this.arryList[i].id]) {
            // 存在图书删除
            delete applyBookBox[this.arryList[i].id]
          }
        }
      }
      this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
    },
    selectFnBox (val) {
      // 选择的是当前所有的选中，还需要比对未选中项 applyBookBoxInit
      let applyBookBox = this.changeData(this.applyBookBox)
      // let init_ = this.changeData(this.applyBookBoxInit)
      console.log('获取到的内容val：', val)
      if (val.length) {
        // 有选项 对本页面的选项进行比对
        let valBox = {}
        for (let i = 0; i < val.length; i++) {
          valBox[val[i].id] = val[i]
        }
        applyBookBox = valBox
      } else {
        // 清除所有 arryList
        applyBookBox = this.changeData({})
      }
      this.applyBookBox = applyBookBox // 更新视图对象
      console.log('applyBookBox最后内容:', this.applyBookBox)
    },
    handleSizeChange (val) {
      this.page.pageindex = val
      this.InitFn()
    },
    submitCheckFn () {
      console.log('applyBookBox提交:', this.changeData(this.applyBookBox))
      if (JSON.stringify(this.applyBookBox) === '{}') {
        this.$message({
          message: '请选择餐品',
          type: 'error'
        })
      } else {
        this.$emit('studentFn', this.changeData(this.applyBookBox))
        this.dialogVisible = false
      }
    },
    changeData(option){
      return JSON.parse(JSON.stringify(option))
    }
  },

  mounted () {
  }
}
</script>
